<template>
<div @click="backTop" class="go-top-btn cursor-pointer">
  <q-icon class="icon absolute-center" name="fas fa-chevron-up"></q-icon>
</div>
</template>

<script>
export default {
  name: 'scrollTop',
  props: {
    elem: { type: HTMLDivElement },
    topY: { type: Number },
    duration: { type: Number },
  },
  methods: {
    backTop() {
      this.scrollTo((this.elem || document.documentElement), this.topY || 0, this.duration || 300);
    },
    scrollTo(element, to, duration) {
      if (duration <= 0) return;
      const difference = to - element.scrollTop;
      // eslint-disable-next-line no-mixed-operators
      const perTick = difference / duration * 10;

      setTimeout(() => {
        element.scrollTop += perTick;
        if (element.scrollTop === to) return;
        this.scrollTo(element, to, duration - 10);
      }, 10);
    },
  },
};
</script>

<style lang="scss" scoped>
.go-top-btn {
     position: absolute;
     width: 46px;
     height: 46x;
     min-height: 46px;
     bottom: 24px;
     right: 20px;
     background-color: #626262;
     border-radius: 4px;
}
   div{
     color: white;
     text-align: center;
     .icon{
       font-size: 24px;
     }
   }
</style>
